<template>
  <el-dropdown
    class="avatar-container right-menu-item hover-effect"
    trigger="hover"
    @command="changeLanguage"
  >
    <div class="avatar-wrapper">
      <img :src="i18nImage" class="user-avatar" />
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item
        v-for="item in supportedLangs"
        :key="item.value"
        :command="item.value"
      >
        <span :style="{ color: $i18n.locale == item.value ? '#409eff' : '' }">{{
          item.label
        }}</span></el-dropdown-item
      >
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import i18nImage from "@/assets/images/i18n.png";
export default {
  props: {},
  data() {
    return {
      i18nImage,
    };
  },
  computed: {
    supportedLangs() {
      return this.$store.state.settings.supportedLangs;
    },
  },
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang;
    },
  },
};
</script>

<style lang="scss" scoped>
.user-avatar {
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
</style>
